<template>
  <div class="app-content-body fade-in-up ng-scope">
    <div class="fade-in ng-scope">
      <div class="bg-light lter b-b wrapper-md ng-scope table-page-title">
        <h1 class="m-n font-thin h3">栏目修改</h1>
      </div>
      <div class="wrapper-md ng-scope">
        <div class="panel panel-default">
          <div class="panel-heading">
            <strong>栏目信息</strong>
            <el-popover
              ref="delColumnPopover"
              placement="bottom"
              width="160"
              v-model="delColumnShow">
              <p>删除当前栏目会级联删除下级栏目，确认删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="delColumnShow = false">取消</el-button>
                <el-button type="primary" size="mini" @click="delColumn()">确定</el-button>
              </div>
            </el-popover>
            <el-button-group>
              <el-button v-auth="'VColumn:tab:add'" type="info" @click="dialogColumn = true;addType='same'" size="small" icon="plus">同级</el-button>
              <el-button v-auth="'VColumn:tab:add'" type="info" @click="dialogColumn = true;addType='different'" size="small" icon="plus">下级</el-button>
              <el-button v-auth="'VColumn:tab:del'" type="danger" v-popover:delColumnPopover :loading="delColumnLoading" size="small" icon="delete">删除</el-button>
            </el-button-group>
          </div>
          <div class="panel-body">
            <columnForm :type="'edit'"></columnForm>
          </div>
          <el-dialog ref="addColumndialog" title="栏目添加" size="large" v-scrollclick custom-class="el-dialog--width--75" @open="addDialogOpen()" top="7%" v-model="dialogColumn">
            <div class="app-content-body fade-in-up ng-scope">
              <div class="fade-in ng-scope">
                <div class="wrapper-md ng-scope">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <strong>栏目信息</strong>
                    </div>
                    <div class="panel-body">
                      <columnForm :type="'add'"></columnForm>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  import ColumnForm from './form.vue'
  import {SERVICE_URLS} from '../../../../config/service.url'
  import Vue from 'vue'
  import {updateColumnChoose} from './update.choose'


  export default{
    data(){
      return {
        sysColumn: {},
        delColumnShow: false,
        dialogColumn: false,
        addType: "",
        delColumnLoading: false
      }
    },
    components: {
      ColumnForm
    },
    mounted(){
      this.$store.commit('columnAddDialogUpdate', this.$refs.addColumndialog);
    },
    methods: {
      addDialogOpen(){
        this.$store.commit('columnAddStateUpdate');
        this.$store.commit("cacheDataUpdate", {
          name: "sysColumnParentName",
          value: {
            parentName: $("#sys-column-parent").find("input").val(),
            addType: this.addType
          }
        });
      },
      delColumn(){
        //获取当前选中节点值
        const self = this;
        const treeNode = this.$store.state['sysColumn'];
        Vue.submit(self, {
          url: SERVICE_URLS.column.delete,
          params: {
            id: treeNode.id
          },
          loading: 'delColumnLoading',
          callback: function (data) {
            const treeObj = self.$store.state['treeObj'];
            const selectNode = treeObj.getSelectedNodes()[0];
            //移除当前节点
            treeObj.removeNode(selectNode);
            //设置第一个节点选中
            const chooseNode = treeObj.getNodes()[0];
            treeObj.selectNode(chooseNode);
            //设置当前选中
            updateColumnChoose(self, chooseNode);
          }
        }, Vue);
        this.delColumnShow = false;
      }
    }
  }
</script>
